import Card from '@/components/Card';
import Description from '@/components/Description';
import Empty from '@/components/Empty';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { Flex } from 'antd';
import type { DescriptionsProps } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import Style from '../../index.less';

interface propsType {
  data?: API.EmmuVo['liquidLeakageDetections'];
}
const Index: React.FC<propsType> = ({ data }) => {
  const intl = useIntl();
  const [Options, setOptions] = useState({
    type1: [],
    online: [],
    faultstatus: [],
    liquidStatus: [],
  });
  const [isEmpty, setEmpty] = useState(false);

  const overallStateCopy = [
    {
      key: 'liquidLeakageStatus',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.leakState' }),
      children: '',
    },
  ];

  const baseInfoCopy = [
    {
      key: 'enable',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.isEnable' }),
      children: '',
    },
    {
      key: 'onlineState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      children: '',
    },
    {
      key: 'faultState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultStatus' }),
      children: '',
    },
    {
      key: 'equipmentModel',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceModel' }),
      children: '',
    },
  ];

  const [overallState, setoverallState] = useState<DescriptionsProps['items']>(overallStateCopy);
  const [baseInfo, setbaseInfo] = useState<DescriptionsProps['items']>(baseInfoCopy);
  const [isDataLoaded, setIsDataLoaded] = useState(false);
  const changeFuntion = (key: any, result: any) => {
    const array = ['enable'];
    const array_onlineState = ['onlineState'];
    const array_faultState = ['faultState'];
    const array_liquidStatus = ['liquidLeakageStatus'];

    if (array.includes(key)) {
      return Options.type1.find((res) => res.value === result)?.['label'] || null;
    } else if (array_onlineState.includes(key)) {
      return Options.online?.find((res) => res.value === result)?.['label'] || null;
    } else if (array_faultState.includes(key)) {
      return Options.faultstatus?.find((res) => res.value === result)?.['label'] || null;
    } else if (array_liquidStatus.includes(key)) {
      return Options.liquidStatus?.find((res) => res.value === result)?.['label'] || null;
    } else {
      return result;
    }
  };

  const changeContent = (data) => {
    if (data && data?.length) {
      const desc1 = overallStateCopy
        .map((item) => {
          return {
            ...item,
            children: changeFuntion(
              item.key,
              data?.[0]?.runningStateOfLiquidLeakageDetection?.[item.key],
            ),
          };
        })
        .filter((res) => res.children !== null);
      setoverallState(desc1);

      const desc4 = baseInfoCopy
        .map((item) => {
          return {
            ...item,
            children: changeFuntion(
              item.key,
              data?.[0]?.basicInformationOfLiquidLeakageDetection?.[item.key],
            ),
          };
        })
        .filter((res) => res.children !== null);
      setbaseInfo(desc4);

      if (!desc1.length && !desc4.length) {
        setEmpty(true);
      } else {
        setEmpty(false);
      }
    } else {
      setEmpty(true);
    }
  };

  useEffect(() => {
    if (!isDataLoaded) {
      Promise.all([
        fetchDictInfo(DATABASE_TYPE_ENUM.ENABLE_DEVI, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.DEHUMIDIFICATION_FAULT_STATE, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_STATUS, true),
      ]).then((res) => {
        setOptions({
          type1: res[0],
          online: res[1],
          faultstatus: res[2],
          liquidStatus: res[3],
        });
        setIsDataLoaded(true);
      });
    }
  }, []);

  useEffect(() => {
    if (isDataLoaded && data) {
      changeContent(data);
    }
  }, [isDataLoaded, data]);

  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 0,
        flexDirection: 'column',
      }}
    >
      {!isEmpty ? (
        <>
          {overallState?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.runningStatus' })}
              className={Style.CardStyle}
            >
              <Description items={overallState} column={{ xxl: 3, xl: 4, md: 2, sm: 1 }} />
            </Card>
          ) : null}

          {baseInfo?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.basicInformation' })}
              className={Style.CardStyle}
            >
              <Description items={baseInfo} column={{ xxl: 3, xl: 4, md: 2, sm: 1 }} />
            </Card>
          ) : null}
        </>
      ) : (
        <Flex
          justify="center"
          align="center"
          style={{ width: '100%', height: '100%', marginTop: '290px' }}
        >
          <Empty />
        </Flex>
      )}
    </div>
  );
};

export default Index;
